<template>
    <div class="app-container">
        <el-form :inline="true" :model="queryParams" class="demo-form-inline">
            <el-form-item label="主键">
                <el-input size="mini" v-model="queryParams.id" placeholder="主键"></el-input>
            </el-form-item>

            <el-form-item label="订单主键">
                <el-input size="mini" v-model="queryParams.orderId" placeholder="订单主键"></el-input>
            </el-form-item>

            <el-form-item label="商品主键">
                <el-input size="mini" v-model="queryParams.productId" placeholder="商品主键"></el-input>
            </el-form-item>

            <el-form-item label="数量">
                <el-input size="mini" v-model="queryParams.quantity" placeholder="数量"></el-input>
            </el-form-item>

            <el-form-item label="消费">
                <el-input size="mini" v-model="queryParams.cost" placeholder="消费"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" size="mini" @click="handleQuery">查询</el-button>
                <el-button size="mini" @click="handleResetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="5">
            <el-col :span="1.5">
                <el-button type="primary" icon="el-icon-plus" @click="handleAdd" size="mini">添加</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button icon="el-icon-delete" type="danger" @click="handleBatchDelete" size="mini">删除选中</el-button>
            </el-col>
        </el-row>
        <el-table
                :data="tableData"
                stripe
                border
                @selection-change="handleSelectionChange"
                style="width: 100%"
                :cell-style="{padding:'3px'}"
        >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="id" label="主键"></el-table-column>
            <el-table-column prop="orderId" label="订单主键"></el-table-column>
            <el-table-column prop="productId" label="商品主键"></el-table-column>
            <el-table-column prop="quantity" label="数量"></el-table-column>
            <el-table-column prop="cost" label="消费"></el-table-column>
            <el-table-column fixed="right" label="操作" width="160">
                <template slot-scope="scope">
                    <el-tooltip content="修改" placement="top">
                        <el-button @click="handleEdit(scope.row)" type="primary" size="small" icon="el-icon-edit" circle></el-button>
                    </el-tooltip>
                    <el-tooltip content="删除" placement="top">
                        <el-button @click="handleDeleteRow(scope.row)" type="danger" size="small" icon="el-icon-delete" circle></el-button>
                    </el-tooltip>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                layout="total, prev, pager, next"
                v-show="total>0"
                :total="total"
                :page-size="queryParams.size"
                @current-change="handleCurrentChange">
        </el-pagination>

        <!-- 添加或修改对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="订单主键" prop="orderId">
                            <el-input v-model="form.orderId" placeholder="请输入订单主键" maxlength="32"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="商品主键" prop="productId">
                            <el-input v-model="form.productId" placeholder="请输入商品主键" maxlength="32"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="数量" prop="quantity">
                            <el-input v-model="form.quantity" placeholder="请输入数量" maxlength="32"/>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="消费" prop="cost">
                            <el-input v-model="form.cost" placeholder="请输入消费" maxlength="32"/>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import {add, del, get, list, update} from "@/api/easybuy/orderDetail";
    export default {
        name: 'OrderDetail',
        data() {
            return {
                queryParams: {
                    current: 1,
                    size: 10
                },
                total: 0,
                tableData: [],
                multipleSelection: [],
                title: '',
                // 添加/修改表单参数
                form: {
                },
                // 添加/修改表单校验
                rules: {
                    orderId: [
                        {required: true, message: "订单主键不能为空", trigger: "blur"}
                    ],
                    productId: [
                        {required: true, message: "商品主键不能为空", trigger: "blur"}
                    ],
                    quantity: [
                        {required: true, message: "数量不能为空", trigger: "blur"}
                    ],
                    cost: [
                        {required: true, message: "消费不能为空", trigger: "blur"}
                    ],
                },
                // 是否显示弹出层
                open: false,
            }
        },
        created() {
            this.getList()
        },
        watch: {
            // 删除最后一页所有数据时，回到上一页
            total(val) {
                if(val == (this.queryParams.current-1) * this.queryParams.size){
                    this.queryParams.current--
                    this.getList()
                }
            }
        },
        methods: {
            handleQuery() {
                this.getList()
            },
            handleResetQuery() {
                this.queryParams = {
                    id: undefined,
                    orderId: undefined,
                    productId: undefined,
                    quantity: undefined,
                    cost: undefined,
                    current: 1,
                    size: 10
                }
            },
            // 取消按钮
            cancel() {
                this.open = false;
                this.reset();
            },
            reset() {
                this.form = {
                    id: undefined,
                    orderId: undefined,
                    productId: undefined,
                    quantity: undefined,
                    cost: undefined,
                }
            },
            submitForm() {
                this.$refs["form"].validate(valid => {
                    if(valid) {
                        if(this.form.id != undefined) {
                            update(this.form).then(()=>{
                                this.$message({message:'修改成功', type:'success'})
                                this.open = false
                                this.getList()
                            })
                        } else {
                            add(this.form).then(()=>{
                                this.$message({message:'添加成功', type:'success'})
                                this.open = false
                                this.getList()
                            })
                        }
                    }
                })
            },
            getList() {
                list(this.queryParams).then(response => {
                    this.tableData = response.data.records
                    this.total = response.data.total
                })
            },
            handleSelectionChange(val) {
                this.multipleSelection = val
            },
            handleCurrentChange(val) {
                this.queryParams.current = val;
                this.getList()
            },
            handleAdd() {
                this.reset();
                this.open = true;
                this.title = "添加";
            },
            handleView(row) {
                get(row.id).then(resp=>{
                    console.log(resp);
                })
            },
            handleEdit(row) {
                this.reset();
                get(row.id).then(resp=>{
                    this.form = resp.data;
                    this.open = true;
                    this.title = "修改";
                })
            },
            handleDeleteRow(row) {
                this.$confirm('确定删除吗?', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let idList = row.id;
                    del(idList).then(resp => {
                        this.$message({
                            type: 'success',
                            message: resp.msg
                        });
                        this.getList()
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleBatchDelete() {
                if(this.multipleSelection.length == 0) {
                    this.$alert('请至少选中一条')
                } else {
                    this.$confirm('确定删除选中的吗, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        let idList = this.multipleSelection.map(row=>row.id).join(",");
                        del(idList).then(resp => {
                            this.$message({
                                type: 'success',
                                message: resp.msg
                            });
                            this.getList()
                        })

                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });
                }
            }
        }
    }
</script>